@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&display=swap'); // 导入字体

$str: '111001101001011110110110 111001001011100110001011 111001001011100010010110 111001111010100110111010 111001001011100110001011 111001111001010110001100'; // 字符串变量，包含一串二进制数字字符串
$length: str-length($str); // 获取字符串的长度
$n: 50; // 定义数字的数量
$animationTime: 2.5; // 定义动画时间
$perColumnNums: 25; // 每列显示的数字数量

@function randomChar() {
    $r: random($length);
    @return str-slice($str, $r, $r);
}

@function randomChars($number) {
    $value: '';

    @if $number > 0 {
        @for $i from 1 through $number {
            $value: $value + randomChar();
        }
    }
    @return $value;
}

body, p {
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    overflow: hidden;
}

.g-container {
    width: 100vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    font-family: 'Inconsolata', monospace, sans-serif;
}

p {
    position: relative;
    width: 5vh;
    height: 100vh;
    text-align: center;
    font-size: 5vh;
    word-break: break-all;
    white-space: pre-wrap;

    &::before,
    &::after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        overflow: hidden;
    }
}

@for $i from 0 through $n {
    $content: randomChars($perColumnNums);  // 生成随机字符
    $contentNext: randomChars($perColumnNums);  // 生成随机字符
    $delay: random($n);  // 生成随机延迟时间
    $randomAnimationTine: #{$animationTime + random(20) / 10 - 1}s;  // 生成随机动画时间

    // 在第 $i 个 p 元素的前面添加动画
    p:nth-child(#{$i})::before {
        content: $content;  // 添加随机字符内容
        color: rgb(179, 255, 199);  // 设置颜色
        text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;  // 添加文本阴影
        animation: typing-#{$i} $randomAnimationTine steps(20, end);  // 添加动画
        animation-iteration-count: infinite;  // 设置动画无限循环
        animation-delay: #{$delay * 0.1s * -1}s;  // 设置动画延迟时间
        z-index: 1;  // 设置元素的堆叠顺序
    }

    // 在第 $i 个 p 元素的后面添加动画
    p:nth-child(#{$i})::after {
        $alpha: random(40) / 100 + 0.6;  // 生成随机 alpha 值
        content: '';  // 不添加内容
        background: linear-gradient(rgba(0, 0, 0, $alpha), rgba(0, 0, 0, $alpha), rgba(0, 0, 0, $alpha), transparent 75%, transparent);  // 添加背景线性渐变
        background-size: 100% 220%;  // 设置背景渐变尺寸
        background-repeat: no-repeat;  // 设置背景不重复
        animation: mask $randomAnimationTine infinite;  // 添加动画
        animation-iteration-count: infinite;  // 设置动画无限循环
        animation-delay: #{($delay - 2) * 0.1s * -1}s;  // 设置动画延迟时间
        animation-timing-function: linear;  // 设置动画时间函数
        z-index: 2;  // 设置元素的堆叠顺序
    }

    @keyframes typing-#{$i} {
        0% {
            height: 0;  // 设置初始高度为0
        }
        25% {
            height: 100%;  // 设置高度为100%
        }
        100% {
            height: 100%;  // 设置高度为100%
            content: $contentNext;  // 更新内容为随机字符
        }
    }
}
}
@keyframes mask {
    0% {
        background-position: 0 220%;
    } 
    30% {
        background-position: 0 0%;
    }
    100% {
        background-position: 0 0%;
    }
}